<template>
  <div>
    <el-dialog :visible.sync="dialog" :before-close="handleClose" title="添加分类" width="580px">
      <el-form ref="createInfo" :model="newform" :rules="rules">
        <el-form-item :label-width="formLabelWidth" label="名称" prop="name">
          <el-input v-model="newform.name" style="width:300px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="分类描述">
          <el-input :rows="4" v-model="newform.description" type="textarea" style="width:300px;"/>
          <p style="margin:0;color:#8a8a8a">非必填</p>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="分类图片">
          <img v-if="newform.icon" :src="newform.icon" alt class="img" style="width:300px;height:auto;">
          <el-upload
            :on-change="handleLogoChange"
            :http-request="uploadLogoFile"
            :before-upload="beforeUpload"
            :limit="1"
            action=""
            class="upload-demo"
            accept="image/jpg, image/png"
          >
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，建议图片尺寸为58*58，且不超过50kb</div>
            <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="newform.hasDelete === true" icon="el-icon-delete" style="float:left" @click="deleteCategory">删除</el-button>
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClickSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { upLoadFile } from '@/api/upLoadFile' // 数据接口
  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      formLabelWidth: {
        type: String,
        default: '120px'
      },
      newform: {
        type: Object,
        default: () => {
        }
      }
    },
    data() {
      return {
        logofile: '',
        rules: {
          name: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      dialog() {
        return this.dialogVisible
      }
    },
    methods: {
      handleClickSubmit() {
        this.$refs.createInfo.validate((valid) => {
          if (valid) {
            delete this.newform.hasDelete
            this.$emit('submit', this.newform)
          }
        })
      },
      deleteCategory() {
        this.$confirm('是否确定删除该分类', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('deleteCategory', this.newform)
          this.$refs.createInfo.resetFields()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          })
        })
      },
      handleClose() {
        this.$refs.createInfo.resetFields()
        this.$emit('cancel')
      },
      handleLogoChange(file) {
        this.logofile = file.raw
      },
      uploadLogoFile() {
        const fileForm = new FormData()
        fileForm.append('name', this.logofile.name)
        fileForm.append('uid', this.logofile.uid)
        fileForm.append('file', this.logofile)
        upLoadFile(fileForm).then(response => {
          this.newform.icon = response.data.url
        })
      },
      beforeUpload(file) {
        if (file.size > 50 * 1024) {
          this.$message.error('上传文件大小不能超过 50KB!')
          return false   //必须返回false
        }
      }
    }
  }
</script>

<style lang="scss">
  .el-dialog {
    border-radius: 6px;
  }
</style>
